<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    custom-class="dialog-style"
    width="650px"
  >
    <el-form
      :model="form"
      label-position="right"
      label-width="100px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="title">
            <el-input v-model="form.title" autocomplete="off" />
          </el-form-item>
          <el-form-item label="icon">
            <svg-icon class="icon" :icon-class="form.icon" />
            <el-select v-model="form.icon" class="select-icon" filterable placeholder="请选择">
              <el-option
                v-for="ico in icons"
                :key="ico"
                :label="ico"
                :value="ico"
              >
                <svg-icon :icon-class="ico" />
                <span>{{ ico }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-checkbox v-model="form.alwaysShow">alwaysShow</el-checkbox>
          </el-form-item>
          <el-form-item label="">
            <el-checkbox v-model="form.affix">affix</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="path">
            <el-input v-model="form.path" autocomplete="off" />
          </el-form-item>
          <el-form-item label="redirect">
            <el-input v-model="form.redirect" autocomplete="off" />
          </el-form-item>
          <el-form-item label="">
            <el-checkbox v-model="form.noCache">noCache</el-checkbox>
          </el-form-item>
          <el-form-item label="">
            <el-checkbox v-model="form.breadcrumb">breadcrumb</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="activeMenu">
        <el-input v-model="form.activeMenu" autocomplete="off" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="!saving" @click="visible=false">取 消</el-button>
      <el-button type="primary" :loading="saving" @click="handleSave">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import icons from './icons'

export default {
  name: 'FuncMenuInfo',
  props: {
    fn: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      title: '',
      icons: icons,
      saving: false,
      visible: false,
      add: true,
      form: {
        id: '',
        name: '',
        parentId: '',
        component: '',
        alwaysShow: false,
        redirect: '',
        path: '',
        title: '',
        icon: '',
        noCache: false,
        affix: false,
        breadcrumb: false,
        activeMenu: ''
      }
    }
  },
  methods: {
    handleSave() {
      this.saving = true
      // console.log(this.fn)
      // return
      this.fn(this, this.form).then(res => {
        if (res) {
          this.$success('操作成功')
          this.visible = false
          this.saving = false
          this.$emit('saved', this.add, res)
        }
      }).catch(() => {
        this.saving = false
      })
    },
    showEdit(menuData) {
      this.add = false
      this.title = '编辑菜单 - ' + menuData['component']
      this.form.id = menuData['id']
      this.form.alwaysShow = menuData['alwaysShow']
      this.form.redirect = menuData['redirect']
      this.form.path = menuData['path']
      this.form.title = menuData['meta']['title']
      this.form.icon = menuData['meta']['icon']
      this.form.noCache = menuData['meta']['noCache']
      this.form.affix = menuData['meta']['affix']
      this.form.breadcrumb = menuData['meta']['breadcrumb']
      this.form.activeMenu = menuData['meta']['activeMenu']
      this.visible = true
    },
    showAdd(parentId, page) {
      this.add = true
      this.form.parentId = parentId
      if (page) {
        // 添加功能菜单
        this.title = '添加菜单 - ' + page['file']
        const paths = page['file'].split('/')
        let path = ''
        if (paths.length === 1) {
          path = paths[0]
        } else if (paths.length > 1) {
          if (paths[paths.length - 1] === 'index') {
            path = paths[paths.length - 2]
          } else {
            path = paths[paths.length - 1]
          }
        }
        this.form.name = page['file'].replace(new RegExp('/', 'gm'), '_')
        this.form.path = path
        this.form.redirect = ''
        this.form.title = page['title']
        this.form.icon = page['icon']
        this.form.component = page['file']
        this.form.alwaysShow = false
        this.form.affix = false
        this.form.breadcrumb = true
      } else {
        // 添加非功能菜单
        this.title = '添加菜单'
        this.form.name = ''
        this.form.path = ''
        this.form.redirect = 'noRedirect'
        this.form.title = ''
        this.form.icon = ''
        this.form.component = ''
        this.form.alwaysShow = false
        this.form.affix = false
        this.form.breadcrumb = true
      }
      this.visible = true
    }
  }
}
</script>

<style scoped lang="less">
.icon {
  width: 36px;
  margin-bottom: -11px;
  padding: 5px;
  height: 36px;
  border-radius: 4px;
  border: solid 1px #ddd;
}
.select-icon {
  width: ~"calc(100% - 40px)";
}
.bold {
  font-weight: bold;
}
</style>
